<template>
  <view class="cart">
    <view class="card" v-for="(item, index) in list" :key="index">
      <view class="card-item">
        <view class="select" @click="changeRadio(index)">
          <view class="radio" :class="item.checked ? 'active' : ''">
            <image
              :src="imageUrl + '/static/home/radio.png'"
              mode="scaleToFill"
            />
          </view>
        </view>
        <view class="goods">
          <image :src="imageUrl + item.image" mode="widthFix" />
          <view class="info">
            <view class="title line-clamp-1">{{ item.name }}</view>
            <view class="sku">{{ item.sku[0].name }}</view>
            <view class="price_num">
              <view class="price">{{ item.price }}</view>
              <view class="num_box">
                <view
                  @click="sub(index)"
                  class="sub"
                  :class="item.number == 1 ? 'sub_none' : ''"
                >
                  <image
                    :src="imageUrl + '/static/home/sub.png'"
                    mode="widthFix"
                  />
                </view>
                <view class="numItem">
                  {{ item.number }}
                </view>
                <view @click="add(index)" class="add">
                  <image
                    :src="imageUrl + '/static/home/add.png'"
                    mode="widthFix"
                  />
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="footer">
      <view class="select" @click="selectAll">
        <view class="radio" :class="checkedAll ? 'active' : ''">
          <image
            :src="imageUrl + '/static/home/radio.png'"
            mode="scaleToFill"
          />
        </view>
        <view class="tip">全选</view>
      </view>
      <view class="total">
        <view class="text">共{{ num }}件</view>
        <text style="font-size: 24rpx; color: #333">合计： </text>
        <view class="price">
          {{ total }}
        </view>
        <button class="btn" @click="submit">提交</button>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      imageUrl: "",
      num: 0,
      total: 0,
      list: [],
      ids: [],
      checkedAll: false,
    };
  },
  onShow() {
    this.list = [
      {
        name: "环球黑色板鞋女2024新款春季复古时尚休闲鞋",
        id: 1,
        price: 199,
        sku: [
          {
            name: "米黑加绒，35",
            id: 1,
          },
        ],
        image: "/static/home/shop1.jpg",
        number: 1,
      },
      {
        name: "环球黑色板鞋女2024新款春季复古时尚休闲鞋",
        id: 2,
        price: 19,
        sku: [
          {
            name: "米黑加绒，35",
            id: 1,
          },
        ],
        image: "/static/home/shop1.jpg",
        number: 2,
      },
      {
        name: "环球黑色板鞋女2024新款春季复古时尚休闲鞋",
        id: 3,
        price: 99,
        sku: [
          {
            name: "米黑加绒，35",
            id: 1,
          },
        ],
        image: "/static/home/shop1.jpg",
        number: 3,
      },
    ];
    this.list.forEach((item) => {
      item.checked = false;
    });
  },
  methods: {
    submit() {
      console.log(this.ids);
    },
    add(index) {
      this.list[index].number++;
      this.set();
    },
    sub(index) {
      if (this.list[index].number > 1) {
        this.list[index].number--;
        this.set();
      }
    },
    selectAll(e) {
      this.checkedAll = !this.checkedAll;
      this.list.forEach((item) => {
        item.checked = this.checkedAll;
      });
      this.set();
    },
    change(e) {
      this.set();
    },
    changeRadio(index) {
      this.list[index].checked = !this.list[index].checked;
      this.checkedAll = this.list.every((item) => item.checked);
      this.set();
    },
    set() {
      this.num = 0;
      this.total = 0;
      this.ids = [];
      this.list.forEach((item) => {
        if (item.checked) {
          this.num += item.number;
          this.total += item.price * item.number;
          this.ids.push(item.id);
        }
      });
      console.log(this.ids);
    },
  },
};
</script>
<style lang="scss" scoped>
.cart {
  padding: 20rpx;
  box-sizing: border-box;
  background: #f7f7f7;
  min-height: 100vh;
  .card {
    background: white;
    border-radius: 20rpx;
    margin-top: 20rpx;
    padding: 20rpx 10rpx;
    .card-item {
      display: flex;
      align-items: center;
      .goods {
        display: flex;
        align-items: center;
        margin-left: 20rpx;
        image {
          width: 240rpx;
          border-radius: 20rpx;
        }
      }
      .info {
        display: flex;
        flex-direction: column;
        margin-left: 20rpx;
        .title {
          font-size: 30rpx;
          line-height: 1.2em;
          font-weight: bold;
        }
        .sku {
          font-size: 24rpx;
          color: #999;
          margin-top: 10rpx;
        }
        .price_num {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 10rpx;
          .price {
            font-size: 28rpx;
            font-weight: bold;
            color: red;
          }
          .price::before {
            content: "¥";
            font-size: 24rpx;
            color: red;
          }
          .num_box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 60rpx;
            .sub {
              width: 46rpx;
              height: 46rpx;
              display: flex;
              align-items: center;
              padding: 10rpx 8rpx;
              box-sizing: border-box;
              background: #eeeeee;
              color: #fff;
              border-radius: 8rpx;
              image {
                width: 100%;
                height: 100%;
              }
            }
            .sub_none {
              background: #f7f7f7 !important;
            }
            .numItem {
              font-size: 26rpx;
              width: 80rpx;
              height: 46rpx;
              line-height: 46rpx;
              text-align: center;
              background: #eeeeee;
              margin: 0 4rpx;
              border-radius: 8rpx;
            }
            .add {
              width: 46rpx;
              height: 46rpx;
              display: flex;
              align-items: center;
              padding: 10rpx 8rpx;
              box-sizing: border-box;
              background: #eeeeee;
              color: #fff;
              border-radius: 8rpx;
              image {
                width: 100%;
                height: 100%;
              }
            }
          }
        }
      }
    }
  }
  .card:nth-child(1) {
    margin-top: 0;
  }
  .footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    background: white;
    padding: 10rpx 20rpx;
    box-sizing: border-box;

    .total {
      display: flex;
      align-items: center;
      font-size: 26rpx;
      .text {
        color: #999;
        margin-right: 10rpx;
      }
      .price {
        color: red;
        font-weight: bold;
        font-size: 34rpx;
        margin-right: 20rpx;
      }
      .price::before {
        content: "¥";
        font-size: 24rpx;
        color: red;
        font-weight: normal;
      }
      .btn {
        width: 180rpx;
        height: 76rpx;
        line-height: 76rpx;
        font-size: 26rpx;
        border-radius: 40rpx;
        text-align: center;
        background: #df4647;
        color: white;
      }
    }
  }
}
.line-clamp-1 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.select {
  display: flex;
  align-items: center;
  .radio {
    width: 40rpx;
    height: 40rpx;
    border: 2rpx solid #999;
    border-radius: 50%;
    image {
      width: 100%;
      height: 100%;
      padding: 8rpx;
      box-sizing: border-box;
    }
  }
  .tip {
    margin-left: 10rpx;
    font-size: 26rpx;
    color: #999;
  }
}
.active {
  background: #df4647;
}
</style>